.login {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-title {
    font-size: 38px;
    background-image: linear-gradient(0deg,
    #4f9aff 0%,
    #d2edff 100%);
    letter-spacing: 2px;
    -webkit-background-clip: text;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    margin-bottom: 35px;
    line-height: 50px;
  }

  .login-form {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 860px;
    height: 552px;
    flex-direction: column;
    padding-top: 119px;

    & .arco-form {
      width: 440px !important;
      margin: 0;
    }

    & .arco-btn {
      width: 440px !important;
      height: 44px;
      border-radius: 22px;
      background-image: linear-gradient(to right, #0368a5, #008997, #0368a5);
      background-size: 200%;
      letter-spacing: 10px;
      padding-left: 25px;
      transition: background-position .5s linear;

      &:hover {
        background-position: 100% 0;
      }
    }

    & .arco-input-wrapper {
      height: 44px;
      border-radius: 2px;
      background-color: rgba(#fff, .7);
      color: #000;
      padding-left: 0 !important;
      box-shadow: 0 2px 4px rgba(0,0,0,.3);
      transition: background-color linear .5s;

      &:hover{
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,.3);
      }

      .arco-input-prefix {
        padding-left: 12px;
      }
    }

    & .arco-input-wrapper:focus-within, .arco-input-wrapper.arco-input-focus {
      border: 1px solid transparent;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,.3);
    }

    .arco-input-wrapper .arco-input-prefix > svg,
    .arco-input-wrapper .arco-input-suffix > svg {
      font-size: 18px;
    }

    & .arco-form-item-label-col {
      display: none;
    }
    & .arco-form-item-wrapper-col {
      flex: 1;
      width: 100%;
    }
  }

  .arco-btn {
    width: 300px;
  }

  .arco-icon-hover {
    font-size: 18px;
    &:hover{
      color: @color-primary-5;
      background-color:transparent;
      &::before{
        background-color:transparent !important;
      }
    }
  }
}






